<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a  href="javasript:;" data-to="/">主入口</a>
    <a  href="javasript:;" data-to="/index">首页</a>
    <a  href="javasript:;" data-to="/my">我的</a>
    <div class="box"></div>
    <script>

        class Router{
            constructor({route}){
                this.route=route
                this.As=document.querySelectorAll("a")
                this.box=document.querySelector(".box")
                this.init()
            }
            init(){
                this.As.forEach(item=>{
                    item.addEventListener('click',e=>{
                        window.history.pushState({},'',e.target.getAttribute('data-to'))
                        this.showView(window.location.pathname)
                    })
                })
            }
            showView(hash){
                this.box.innerHTML=this.route.filter(item=>item.path===hash)[0].component
            }
        }
        new Router({
            route:[
                {
                    path:'/',
                    component:'组入口'
                },
                {
                    path:'/index',
                    component:'首页'
                },
                {
                    path:'/my',
                    component:'我的'
                },
            ]
        })
    </script>
</body>
</html>